<template>
    <div style="display: flex;">
        <div @click="toCheck(item, index)" :class="[num == index ? 'active' : '']" class="dem" v-for="(item, index) in comList"
            :key="index">
            <div>{{ item.name }}</div>
        </div>
    </div>
    <component :is="com"></component>
</template>

<script setup lang="ts">
// 引入组件 vue3组件可不用注册
import Acom from '../compontent/a.vue'
import Bcom from '../compontent/b.vue'
import Ccom from '../compontent/c.vue'

import { ref, reactive, toRefs, onMounted, shallowRef, markRaw } from 'vue'
const com = shallowRef(Acom)
const num = ref(0)
const comList = reactive([
    {
        name: 'A组件',
        com: markRaw(Acom)
    },
    {
        name: 'B组件',
        com: markRaw(Bcom)
    },
    {
        name: 'C组件',
        com: markRaw(Ccom)
    },
])


function toCheck(item, index) {
    num.value = index;
    com.value = item.com;
}
</script>
<style scoped lang="scss">
.dem {
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin: 10px;
    cursor: pointer;
}

.active {
    background-color: aqua;
}
</style>